<template>
  <div class='container'>
    <div>
        <el-dialog
        title="新增文章"
        :visible="addShow"
        width="50%"
        @close="cancelBtn">

        <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
            <el-form-item label="文章标题" prop="title">
                <el-input v-model="formData.title" ></el-input>
            </el-form-item>
            <el-form-item label="文章内容" prop="articleBody">
                <div>
                    <quill-editor
                    style="height:75%"
                        v-model="formData.articleBody"
                    ></quill-editor>
                </div>
            </el-form-item>
            <el-form-item label="视频地址" prop="videoURL">
                <el-input v-model="formData.videoURL" ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" >
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="addBtn">确 定</el-button>
        </span>
        </el-dialog>

    </div>
  </div>
</template>

<script>
import { add } from '../../api/hmmm/articles'
export default {
  props: {
    addShow: {
      type: Boolean
    }
  },
  data () {
    return {
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
        articleBody: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }],
        videoURL: [{ required: true, message: '视频地址不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 取消
    cancelBtn () {
      this.$refs.form.clearValidate()
      this.formData = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$emit('update:addShow', false)
    },
    // 添加
    async addBtn () {
      await this.$refs.form.validate()
      //   this.$parent.page.state = null
      await add(this.formData)
      await this.$parent.list()
      this.formData = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$emit('update:addShow', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>
